<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>使用appear属性实现初始渲染动画</title>
    <!--引入Vue库-->
    <script src="vue.js"></script>
    <style>
      .custom-appear-class {
        opacity: 0;
        background-color: pink;
        transform: translateX(100px);
      }
      .custom-appear-active-class {
        transition: 2s;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button v-on:click="reset">
        <span>单击观察动画效果</span>
      </button>
      <transition
        appear
        appear-class="custom-appear-class"
        appear-active-class="custom-appear-active-class"
      >
        <p>欢迎登录</p>
      </transition>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        methods: {
          reset() {
            history.go();
          },
        },
      });
    </script>
  </body>
</html>
